<head>
    <title>注册页面</title>
    <link href="/lego/static/css/bootstrap.css" rel="stylesheet"/>
    <link href="/lego/static/css/xcConfirm.css" rel="stylesheet"/>
    <style>
        #mainDiv{
            border: 1px solid rgb(220,220,220);
            background-color: white;
            margin-left: 400px;
            margin-right: 400px;
            margin-top: 150px;
            padding-left: 80px;
            padding-top: 30px;
            border-radius: 10px;
        }
        .titleDiv h3{
            margin-left: 200px;
            margin-top: 0px;
            margin-bottom: 20px;
            color: lightslategray;
        }
        .inputDiv{
            width: 350px;
        }
        .loginBtn{
            font-size: 16px;
            width: 100px;
            margin-left: 200px;
        }
        div#div1{
            position:fixed;
            top:0;
            left:0;
            bottom:0;
            right:0;
            z-index:-1;
        }
        div#div1 > img {
            height:100%;
            width:100%;
            border:0;
        }
        .rowDiv label{
            width: 90px;
        }
    </style>
    <script src="/lego/static/js/jquery.1.11.3.min.js"></script>
    <script src = "/lego/static/js/bootstrap.js" ></script>
    <script src="/lego/static/js/underscore-min.js"></script>
    <script src="/lego/static/js/xcConfirm.js"></script>
    <script src="/lego/static/js/common.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#loginBtn").click(function () {
                var formJson = $("#userForm").toJSON();
                if(formJson["userName"] == ""){
                    $("#errorMsg").html("用户名不能为空!!!");
                    return;
                }
                if(formJson["pwd"] == ""){
                    $("#errorMsg").html("密码不能为空!!!");
                    return;
                }
                if(formJson["confirmPwd"] == ""){
                    $("#errorMsg").html("确认密码不能为空!!!");
                    return;
                }
                if(formJson["pwd"] != formJson["confirmPwd"]){
                    $("#errorMsg").html("两次输入的密码不一致!!!");
                    return;
                }
                $.ajax({
                    url: '/lego/userRegister',
                    type: 'POST',
                    data:$("#userForm").toExcludeJSONString("confirmPwd"),
                    contentType:'application/json;charset=UTF-8',
                    success: function (data) {
                        if (data && data.code == 200) {
                            if(data.msg == "注册成功"){
                                var op = {
                                    title: "提示信息",
                                    btn: window.wxc.xcConfirm.btnEnum.ok,
                                    onOk: function(){
                                        setTimeout(function () {
                                            window.location.href = "/lego/loginIndex";
                                        },2000);
                                    }
                                }
                                var msg = "注册成功,2S后跳转到登录页面...";
                                window.wxc.xcConfirm(msg,window.wxc.xcConfirm.typeEnum.success,op);
                            }else {
                                $("#errorMsg").html(data.msg);
                            }
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="div1"><img src="/lego/static/img/background06.jpeg" /></div>
    <div id="mainDiv">
        <div class="form-group titleDiv">
            <h3>用户注册</h3>
        </div>
        <form method="post" class="form-horizontal" id="userForm">
            <div class="form-group rowDiv">
                <label for="teamId" class="col-sm-4 control-label">用户名</label>
                <div class="col-sm-4 inputDiv">
                    <input type="text" class="form-control" name="userName" id="userName"/>
                </div>
            </div>
            <div class="form-group rowDiv">
                <label for="teamId" class="col-sm-4 control-label">密码</label>
                <div class="col-sm-4 inputDiv">
                    <input type="password" class="form-control" name="pwd" id="pwd"/>
                </div>
            </div>
            <div class="form-group rowDiv">
                <label for="teamId" class="col-sm-4 control-label">确认密码</label>
                <div class="col-sm-4 inputDiv">
                    <input type="password" class="form-control" name="confirmPwd" id="confirmPwd"/>
                </div>
            </div>
            <div id="errorMsg" style="color: red"></div>
            <br/>
            <div class="form-group rowDiv">
                <button class="btn btn-success loginBtn" type="button" id="loginBtn">立即注册</button>
            </div>
        </form>
    </div>
</body>
